<template>
  <div class="flex items-center select-none px-0 w-full">
    <div v-if="batch" class="flex items-center gap-x-6">
      <el-checkbox
        v-model="checkAll"
        :indeterminate="indeterminate"
        @change="handleToggleSelect"
      ></el-checkbox>
      <slot>
        <el-button
          v-bind="batchButtonProps"
          @click="batchClick ? batchClick() : () => {}"
        >
          {{ batchButtonText }}
        </el-button>
      </slot>
    </div>
    <el-pagination
      v-model:current-page="state.page"
      v-model:page-size="state.limit"
      :page-sizes="pageSizes"
      :disabled="disabled"
      :background="background"
      :class="`align-${align}`"
      layout="total,sizes,prev,pager,next,jumper"
      :total="pagination.total"
      @current-change="handlePaginationChange()"
      @size-change="handlePaginationChange(true)"
    />
  </div>
</template>

<script setup lang="ts">
import type { ButtonProps, TableInstance } from 'element-plus'

import { pageSizes } from '@/config'
import LoggerUtils from '@/utils/logger'

interface IProps {
  pagination: Pagination
  batch?: boolean
  batchButtonText?: string
  batchButtonProps?: Partial<ButtonProps>
  border?: boolean
  align?: 'right' | 'left' | 'between'
  disabled?: boolean
  background?: boolean
  batchClick?: () => void
  tableRef?: TableInstance
}
const slots = useSlots()
const props = withDefaults(defineProps<IProps>(), {
  border: true,
  batch: false,
  disabled: false,
  background: false,
  batchButtonText: '批量操作',
  align: 'right',
  total: 0
})

interface IEmit {
  (event: 'change', pagination: Pagination): void
}
const emit = defineEmits<IEmit>()

/** 全选状态 */
const checkAll = ref(false)
/** 半选状态 */
const indeterminate = ref(false)

/** 分页数据 */
const state = computed(() => props.pagination)

/** 分页改变事件 */
const handlePaginationChange = (resetPage: boolean = false) => {
  if (resetPage) state.value.page = 1
  const { page, limit } = state.value
  state.value.offset = (page - 1) * limit
  emit('change', state.value)
}

const handleToggleSelect = () => {
  props.tableRef?.toggleAllSelection()
}

/** 校验 Props */
const verificationProps = () => {
  nextTick(() => {
    if (props.batch) {
      if (!props.tableRef) {
        LoggerUtils.warning('请传入TableInstance')
        return
      }
      if (!props.tableRef) {
        LoggerUtils.warning('请传入TableInstance')
        return
      }
      if (!slots.default && !props.batchClick) {
        LoggerUtils.warning(
          '您未传递 批量操作按钮点击事件，可能导致点击按钮没有效果'
        )
        return
      }
    }
  })
}
/** 初始化 */
onMounted(verificationProps)
defineExpose({
  reset() {
    state.value.page = 1
    state.value.limit = 20
    state.value.offset = 0
    handlePaginationChange()
  },
  selectionChange(isCheckAll: boolean, isIndeterminate: boolean) {
    checkAll.value = isCheckAll
    indeterminate.value = isIndeterminate
  }
})
</script>

<style scoped lang="scss">
:deep(.el-pagination) {
  &[class*='align'] {
    @apply w-full;
  }

  &.align-between {
    .el-pagination__jump {
      // @apply ml-auto;
    }

    .btn-prev {
      @apply ml-auto;
    }
  }

  &.align-right {
    @apply ml-auto w-auto;
  }
}
</style>
